<template>
  <div>
    <div class="header_back_page" @click="closeSelectCity">
      <van-icon name="arrow-left" style="margin-right: 6px" />选择城市
    </div>
    <div class="ads_warp1">
      <van-search v-model="searchWord" class="ads_warp1_left" placeholder="输入城市名称进行搜索" />
      <span class="ads_warp1_right" @click="handleSearchWord">搜索</span>
    </div>
    <div class="ads_title">选择城市</div>
    <div class="ads_select_auto">
      <div class="ads_auto_left">
        <img class="address_icon" src="../assets/icon/address_icon.png" alt="">
        <span class="current_address_text">{{ currentAddress }}</span>
      </div>
      <div class="ads_auto_right" @click="updateSelectAds">
        <img
          class="ads_right_update"
          :class="{adsRightUpdateAni: isAddUpdateAni}"
          src="../assets/icon/refresh_icon.png"
          alt=""
        >
      </div>
    </div>
    <div class="ads_title">最近访问</div>
    <div class="ads_city_warp">
      <ul class="ads_city_ul">
        <li v-for="(itemRecent,indexRecent) in historySearchList" :key="indexRecent" class="ads_city_li">
          {{ itemRecent }}
        </li>
      </ul>
    </div>
    <div class="ads_title">热门城市</div>
    <div class="ads_city_warp">
      <ul class="ads_city_ul">
        <li v-for="(itemRecent,indexRecent) in hotList" :key="indexRecent" class="ads_city_li">
          {{ itemRecent.address }}
        </li>
      </ul>
    </div>
    <div class="ads_title">全部城市(按字母排序)</div>
    <div class="ads_add_all">
      <ul class="ads_add_all_ul">
        <li v-for="itemAll in allList" :key="itemAll.id" class="ads_add_all_li">
          <div class="ads_all_title">{{ itemAll.letter }}</div>
          <div class="ads_city_warp">
            <ul class="ads_city_ul">
              <li v-for="(itemRecent,indexRecent) in itemAll.childList" :key="indexRecent" class="ads_city_li">
                {{ itemRecent.address }}
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'AddressSelect',
  components: {},
  props: {},
  data() {
    return {
      searchWord: '',
      recentList: [{ id: 0, address: '上海' }, { id: 1, address: '深圳' }, { id: 2, address: '北京' }],
      hotList: [{ id: 0, address: '上海' }, { id: 1, address: '深圳' }, { id: 2, address: '北京' }, { id: 3, address: '上海' }, { id: 4, address: '深圳' }],
      allList: [
        {
          id: 0,
          letter: 'A',
          childList: [{ id: 0, address: '上海1' }, { id: 1, address: '上海2' }, { id: 2, address: '深圳' }, { id: 3, address: '北京' }],
        },
        {
          id: 1,
          letter: 'B',
          childList: [{ id: 0, address: '上海1' }, { id: 1, address: '上海2' }, { id: 2, address: '深圳' }, { id: 3, address: '北京' }],
        },
        {
          id: 2,
          letter: 'C',
          childList: [{ id: 0, address: '上海1' }, { id: 1, address: '上海2' }, { id: 2, address: '深圳' }, { id: 3, address: '北京' }],
        },
      ],
      currentAddress: '上海',
      isAddUpdateAni: false,
    }
  },
  computed: {
    ...mapState(['historySearchList']),
  },
  create() {
  },
  mounted() {
  },
  methods: {
    ...mapActions(['addHistorySearchList']),
    /** 关闭地址选择 **/
    closeSelectCity() {
      this.$emit('closeSelectCity')
    },
    /** 点击当前定位的刷新图标 **/
    updateSelectAds() {
      if (this.isAddUpdateAni) {
        const timer = setTimeout(() => {
          this.isAddUpdateAni = false
          clearTimeout(timer)
        }, 2000)
      } else {
        this.isAddUpdateAni = true
        const timer = setTimeout(() => {
          this.isAddUpdateAni = false
          clearTimeout(timer)
        }, 2000)
      }
    },
    handleSearchWord() {
      if (this.searchWord === '') {
        this.$toast('请输入关键词')
      } else {
        this.addHistorySearchList(this.searchWord)
        this.searchWord = ''
      }
    },
  },
}
</script>

<style scoped lang="scss">
  @import "../assets/style/base";
  .header_back_page{
    padding: pxTorem(20px) 0 pxTorem(20px) pxTorem(20px);
    font-size: pxTorem(32px);
    display: flex;
    align-items: center;
    border-bottom: pxTorem(18px) solid #f9f9f9;
  }
  .ads_warp1{
    padding-right: pxTorem(30px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ads_warp1_left{
      flex: 1;
    }
    .ads_warp1_right{
      font-size: pxTorem(28px);
      background-color: #1296db;
      color: #F9F9F9;
      border-radius: pxTorem(4px);
      padding: pxTorem(8px) pxTorem(14px);
    }
  }
  .ads_title{
    font-size: pxTorem(34px);
    color: grey;
    padding: pxTorem(30px);
    background-color: #F9F9F9;
  }
  .ads_city_warp{
    background-color: #F9F9F9;
    .ads_city_ul{
      display: flex;
      flex-wrap: wrap;
      padding: pxTorem(0px) pxTorem(14px);
      .ads_city_li{
        width: 31%;
        background-color: #ffffff;
        text-align: center;
        padding: pxTorem(14px) 0;
        font-size: pxTorem(32px);
        margin: 0 1% pxTorem(10px) 1%;
        border-radius: pxTorem(6px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
      }
    }

  }
  .ads_select_auto{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: pxTorem(32px);
    padding:pxTorem(20px) pxTorem(30px);
    .ads_auto_left{
      display: flex;
      align-items: center;
      .address_icon{
        width: pxTorem(40px);
        height: pxTorem(40px);
      }
      .current_address_text{}
    }
    .ads_auto_right{
      .ads_right_update{
        width: pxTorem(40px);
        height: pxTorem(40px);
      }

    }
  }
  .ads_add_all{
    .ads_add_all_ul{
      .ads_add_all_li{
        .ads_all_title{
          background-color: #F9F9F9;
          padding: pxTorem(20px);
          font-size: pxTorem(36px);
        }
      }
    }
  }

  .adsRightUpdateAni{
    animation: myRotate 1s linear 1s infinite;
  }
  @keyframes myRotate {
    0%{
      transform: rotate(1deg);
    }
    100%{
      transform: rotate(360deg);
    }
  }
</style>
